<!--这部分前端代码与student页面基本一致，直接拿来用-->
<template>
  <div style = "padding: 10px">
    <div style = "margin: 10px  0">

      <el-input style="width: 300px" placeholder="请输入名称" v-model="rule_name" clearable></el-input>
      <el-button type="warning" @click="load" style="margin-left: 5px"> <el-icon><Search /></el-icon></el-button>
      <el-button type="warning"  @click ="reset">重置</el-button>
      <el-button type="warning"  @click ="handleAdd"> <el-icon size="15"  ><Plus /></el-icon></el-button>
      <div style = "margin: 10px  0;padding-right:20px">
        <div class="flex">
        </div>

        <el-table :data = "state.tableData"  style="width: 100%">

          <el-table-column prop="rule_grade" label="适用年级" />
          <el-table-column prop="rule_year" label="适用年份" />
          <el-table-column prop="rule_info" label="奖学金细则" />
          <el-table-column prop="rule_createtime" label="创建时间" />


          <el-table-column label="编辑" >
            <template #default="scope">
              <el-button size="small" @click="handleEdit( scope.row,scope.$index) "
              ><el-icon><EditPen /></el-icon></el-button>

              <el-popconfirm
                  title="确认删除吗?"
                  @confirm="remove(scope.row.rule_no)"
              >
                <template #reference>
                  <el-button>删除</el-button>
                </template>
              </el-popconfirm>


            </template>
          </el-table-column>
        </el-table>

        <div style="margin: 10px 0 " >
          <el-pagination background layout="prev, pager, next,total,sizes"
                         v-model:current-page="pageNum"
                         v-model:page-size="pageSize"
                         :page-sizes="[1, 5, 15, 20]"
                         :total="total"
                         @size-change="load"
                         @current-change="load"
          />
        </div>

      </div>
    </div>

    <el-dialog v-model="dialogFormVisible" title="编辑信息">
      <el-form :model="state.form" label-width="100px">
        <el-form-item label="奖学金评定">
          <el-input v-model=state.form.rule_name autocomplete="off" />
        </el-form-item>
        <el-form-item label="年级" >
          <el-input v-model=state.form.rule_grade autocomplete="off"/>
        </el-form-item>
        <el-form-item label="年份" >
          <el-input v-model=state.form.rule_year autocomplete="off"/>
        </el-form-item>
        <el-form-item label="奖学金细则"  >

          <el-input v-model=state.form.rule_info autocomplete="off"  />
        </el-form-item>



      </el-form>
      <template #footer>
      <span class="dialog-footer"><el-button type="primary" @click="save">确认</el-button>
       <el-button @click="dialogFormVisible = false">取消</el-button>

      </span>
      </template>
    </el-dialog>

  </div>
</template>



<script setup>

import {Delete, EditPen, Plus, Search} from "@element-plus/icons-vue";

import {reactive, ref} from "vue";

import {ElMessage} from "element-plus";
import request from "@/utils/request";



/*export default{
  name: 'Home',
  components:{
    Plus,
    EditPen,
    Delete,
    Search
  }}*/

const state = reactive({
  tableData : [],
  form:{},
})

const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(20)


const dialogFormVisible = ref(false)
const globalIndex = ref(-1)  //保存编辑的行号
const rule_name = ref('')

const load = () => {
  let start = (pageNum.value - 1) *pageSize.value
  request.get('/rule/page?rule_name=' + rule_name.value +'&start=' + start + '&pageSize=' +pageSize.value).then(res => {

    state.tableData =res.data.list
    total.value =res.data.total
    console.log(res)
  })
}
load()

// 新增数据    打开弹窗
const handleAdd = () => {
  state.form = {}
  dialogFormVisible.value = true  // 打开弹窗
}

//重置数据
const reset =() =>{
  rule_name.value = ''
  load()
}


// 保存数据，把数据插入到 tableData里面，并刷新页面数据，弹窗关闭
const save = () => {

  /* if (globalIndex.value >= 0) {  // 表示编辑
     state.tableData[globalIndex.value] = state.form
     globalIndex.value = -1  // 还原回去
   } else {  // 新增
     state.tableData.push(state.form)
   }*/

  /* request.post('/student/save',state.form).then (res => {
     if (res.code === '100'){
       ElMessage.success('成功！')
       dialogFormVisible.value = false
     }
     else{
       ElMessage.error(res.msg)
     }
   })*/

  request({
    url:state.form.rule_no ? '/rule/update' :'/rule/save',
    method:state.form.rule_no ? 'PUT' : 'POST',
    data: state.form
  }).then (res => {
    if (res.code === '100'){
      ElMessage.success('成功！')
      load()
      dialogFormVisible.value = false
    }
    else{
      ElMessage.error(res.msg)
    }
  })
}


//编辑数据
const handleEdit = (row, index) => {
  const newObj = Object.assign({}, row)
  state.form = reactive(newObj)
  globalIndex.value = index
  dialogFormVisible.value = true
}

//删除数据
const remove = (rule_no) => {
  request.delete  ('/rule/delete?rule_no=' + rule_no).then(res => {
    if (res.code === '100'){
      ElMessage.success('成功！')
      load()
      dialogFormVisible.value = false
    }
    else{
      ElMessage.error(res.msg)
    }
  })
}


</script>


